<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Kwicks Example Page</title>

        <script src="_js/jquery-1.7.1.js"></script>
        <!--                kwicks{-->
        <script src="_js/kwicks/jquery.easing.1.3.js"></script>
        <script src="_js/kwicks/jquery.kwicks.min.js"></script>

        <!-- demo stuff -->
        <style>
            body { margin: 30px; }
            .kwick1 { background: #53b388; }
            .kwick2 { background: #5a69a9; }
            .kwick3 { background: #c26468; }
            .kwick4 { background: #bf7cc7; }

            /* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */
            .kwicks {
                /* recommended styles for kwicks container */
                list-style: none; /* if UL container is used */
                position: relative;
                margin: 0;
                padding: 0;
            }
            .kwicks .kwick-panel {
                /* these are required, but the values are up to you (must be pixel) */
                width: 200px;
                height: 310px;

                /*do not change these */
                display: block;
                overflow: hidden;
                cursor: pointer;
                padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
            }

            .kwicks.horizontal .kwick-panel {
                /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
                margin-right: 5px; /*Set to same as spacing option. */
                float: left;
            }
            .kwicks.vertical .kwick-panel {
                /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
                margin-bottom: 5px; /*Set to same as spacing option. */
            }

        </style>
        <script>
            $(function(){

                $('#demo').kwicks({

                    // *** Appearance ***
                    max          : 710,         // The width or height of a fully expanded kwick element
                    min          : null,           // The width or height of a fully collapsed kwick element
                    spacing      : 0,            // The width (in pixels) separating each kwick element

                    isVertical   : false,        // Kwicks will align vertically if true

                    sticky       : false,        // One kwick will always be expanded if true
                    defaultKwick : 0,            // The initially expanded kwick (if and only if sticky is true). zero based

                    activeClass  : 'active',     // Class added to active (open) kwick

                    // *** Interaction ***
                    event        : 'mouseenter', // The event that triggers the expand effect
                    eventClose   : 'mouseleave', // The event that triggers the collapse effect

                    // *** Functionality ***
                    duration     : 500,          // The number of milliseconds required for each animation to complete
                    easing       : 'swing',      // Custom animation easing (requires easing plugin if anything other than 'swing' or 'linear')

                    // *** Slideshow ***
                    showDuration : 2000,         // Slideshow duration
                    showNext     : 1,            // set to 1 for left-to-right, -1 for right-to-left or 0 for a random slide

                    // *** Callbacks ***
                    initialized  : function(kwick){}, // event called when kwicks has been initialized
                    init         : function(kwick){}, // event called when the event occurs (click or mouseover)
                    expanding    : function(kwick){}, // event called before kwicks expanding animation begins
                    collapsing   : function(kwick){}, // event called before kwicks collapsing animation begins
                    completed    : function(kwick){}, // event called when animation completes
                    playing      : function(kwick){}, // event called when slideshow starts
                    paused       : function(kwick){}  // event called when slideshow ends

                });

            });
        </script>

    </head>
    <body>

        <h1>Basic Kwicks Demo</h1>

        <ul id="demo">
            <li>
                <div class="kwicks_inner_inner">  ssssssssssssssssssssssssssssssssssssssss</div>
            </li>
            <li>fgf fg fg  gf </li>
            <li> fgdfgd dfg df </li>
            <li> fgfdg gf fd ffd</li>
        </ul>

    </body>
</html>